<template>
  <div>
    <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        @click="test"
        @keydown="test"
        background-color="#66b1ff"
        text-color="#fff"
        active-text-color="#ffd04b">
           <el-menu-item index="0"  @click="testSelect(menus[0])">
             <i class="fa fa-home fa-2x"></i><span>&nbsp;{{menus[0].label}}</span>
           </el-menu-item>
          <el-submenu :index="index+''" v-if="menu.children" v-for="(menu,index) in menus" @click="test" >
            <template slot="title" @click="test">
              <i class="el-icon-menu"></i><span>{{menu.label}}</span>
            </template>
            <el-menu-item :index="(index)+ '-' + (i)" v-for="(m,i) in menu.children" >
              <i class="el-icon-caret-right"></i><span>{{m.label}}</span>
            </el-menu-item>
          </el-submenu>
    </el-menu>

  </div>
</template>
<script>
export default {
  name:"menux",
  data() {
        return {
          activeIndex2: '2',
          menus:[
                {label: "网站首页",
                  url:"/home"
                },
                {
                  label: "招聘信息",
                  url:"/zhaoping",
                  children: [
                    {label: "机关招聘",url:"/zhaoping"},
                    {label: "企业招聘",url:"/zhaoping"},
                    {label: "单位搜索",url:"/zhaoping"}
                  ]
                },
                {
                  label: "人才派遣",
                  url:"/rencai",
                  children: [
                    {label: "活动播报",url:"/rencai"},
                    {label: "劳动保护",url:"/rencai"},
                    {label: "行业咨询",url:"/rencai"},
                    {label: "常见问题",url:"/rencai"},
                    {label: "办事指南及相关下载",url:"/rencai"}
                  ]
                },
                {
                  label: "培训测评",
                  url:"/StudyVideo",
                  children: [
                    {label: "培训课程",url:"/StudyVideo"},
                    {label: "求职指导",url:"/StudyVideo"},
                    {label: "人才评测",url:"/StudyVideo"},
                    {label: "常见问题",url:"/StudyVideo"}
                  ]
                },
                {
                  label: "党群建设",
                  url:"/page1",
                  children: [
                    {label: "支部建设",url:"/page1"},
                    {label: "企业发展",url:"/page1"},
                    {label: "鱼凫先锋",url:"/page1"}
                  ]
                }
             ]
        }
  },
  methods:{
    handleCommand(command){
      if(this.$router.currentRoute.fullPath != command.url ){
        if(command.url){
          this.$router.push(command.url)
        }else{
          this.$router.push("page1")
        }
      }
    },
    selectMenu(item){
      if(item.url){
        this.$router.push(item.url)
      }else{
        this.$router.push("page1")
      }
    },
    handleSelect(key, keyPath) {
      let arr = key.toString().split("-");
      let item = this.menus[parseInt(arr[0])].children[parseInt(arr[1])];
      if(item.url){
        this.$router.push(item.url)
      }else{
        this.$router.push("page1")
      }
    },
    testSelect(item){
      if(item.url){
        this.$router.push(item.url)
      }else{
        this.$router.push("page1")
      }
    },
    test(){
      alert(1)
    }
  }
}
</script>

<style scoped>
.el-menu{
  width: 100%;
}
.el-submenu:first-child{
  float: left;
  margin-left: -10px;
}
</style>